<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import { listDocumentation } from "@/api/business/documentation";

export default {
  name: "App",
  components: { ThemePicker },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  created() {
    // 立即执行一次
    this.loadSymbolInfo()
    // 每分钟执行一次（60000毫秒）
    this.symbolInfoTimer = setInterval(this.loadSymbolInfo, 120 * 1000)
  },
  beforeDestroy() {
    clearInterval(this.symbolInfoTimer)
  },
  methods: {
    async loadSymbolInfo() {
      try {
        const res = await listDocumentation()
        const smallData = res.data.map(item => ({
          f12: item.f12,
          f14: item.f14,
          f2: item.f2,
          f3: item.f3
          // 只选必要字段
        }))
        localStorage.setItem('symbolInfoCache', JSON.stringify(smallData))
      } 
      catch (e) {
        // 错误处理
        console.error(e)
        this.$message && this.$message.error('获取symbol信息失败')
      }
    }
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style>
